<template>
	<div
		class="main-container">
		<filtrate-handle-view
			class="filtrate-bar"
			module-type="customer"
			@load="loading=true"
			@change="searchClick"/>
		<el-table
			v-loading="loading"
			id="crm-table"
			:data="list"
			:height="tableHeight"
			class="n-table--border"
			stripe
			border
			highlight-current-row
			style="width: 100%;margin-top: 10px;"
			@sort-change="sortChange">
			<el-table-column
				v-for="(item, index) in fieldList"
				:key="index"
				:fixed="index==0"
				:prop="item.prop"
				:label="item.label"
				:width="item.width"
				sortable="custom">
				<template
				  slot="header"
				  slot-scope="scope">
				  <div class="table-head-name">{{ scope.column.label }}</div>
				</template>
			</el-table-column>
		</el-table>
		<div class="p-contianer">
			<el-pagination 
				:current-page="currentPage"
				:page-sizes="pageSizes"
				:page-size.sync="pageSize"
				:total="total"
				class="p-bar"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"/>
		</div>
	</div>
</template>

<script>
	import base from '../mixins/base'
	import Lockr from 'lockr'
	import {
		getLoginLog
	} from '@/api/setting/setting'
	export default {
		/** 登录日志 */
		name: 'loginLog',
		mixins: [base],
		data() {
			return {
				loading: false,
				list:[],
				tableHeight: document.documentElement.clientHeight-10, // 表的高度
				sortData: {}, // 字段排序
				currentPage: 1,
				pageSize: Lockr.get('crmPageSizes') || 15,
				pageSizes: [15, 30, 60, 100],
				total: 0,
				fieldList:[
					{prop: "create_user_id",label: "员工",		form_type: "user"},
					{prop: "type",			label: "登录状态",	form_type: "text"},
					{prop: "create_time",	label: "登录时间",	form_type: "text"},
					{prop: "ip",			label: "登录IP",		form_type: "text"},
					{prop: "address",		label: "登录地址",	form_type: "text"},
					{prop: "browser",		label: "浏览器",		form_type: "text"},
					{prop: "os",			label: "系统",		form_type: "text"}
				],
				postParams:{}
			}
		},
		computed: {},
		mounted() {
		  var self = this
		  /** 控制table的高度 */
		  window.onresize = function() {
		  	var offsetHei = document.documentElement.clientHeight
		  	self.tableHeight = offsetHei - 240
		  }
		  this.getList()
		},
		methods:{
			/**
			 * 搜索点击
			 */
			searchClick(params) {
			  this.postParams = params
			  this.getList()
			},
			
			/** 获取列表数据 */
			getList() {
				this.loading = true
				var params = {
					page: this.currentPage,
					limit: this.pageSize,
					search_v: this.search
				}
				if (this.sortData.order) {
					params.order_field = this.sortData.prop
					params.order_type = this.sortData.order == 'ascending' ? 'asc' : 'desc'
				}
				if(this.postParams){
					params.postParams = this.postParams
				}
				getLoginLog(params).then(res => {
					this.list = res.data.list
					this.total = res.data.count
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			
			sortChange(column, prop, order){
				this.sortData = column
				this.getList()
			},
			
			handleSizeChange(val){
				Lockr.set('crmPageSizes', val)
				this.pageSize = val
				this.getList()
			},
			
			handleCurrentChange(val){
				this.currentPage = val
				this.getList()
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../styles/detail.scss';
@import '../styles/table.scss';
@import "../../../styles/xr-theme.scss";
.customer-lock {
  color: #f15e64;
}
.icon{
	font-size: 15px;
	cursor: pointer;
}
\deep\ .el-table th>.cell, .el-table th div {
    display: inline-flex;
	align-items: center;
	padding:0;
	margin:0
}

</style>
